import React from "react"
import './index.scss'
import {Carousel,Toast} from 'antd-mobile'
import ListItem from '../../components/ListItem'
import ContentView from "../../components/ContentView"
import ScrollContent from "../../components/ScrollContent"
import Block from '../../components/Wrapper/Block'
import ToggleBtnGroup from "../../components/ToggleBtnGroup"
import {homeSource} from "../../http/api"
const {SupplyItem,BuyItem,} = ListItem

export default  class Home extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        defaultBtnValue:0,
                        bannerList:[],
                        needsList:[],
                        providerList:[],
                        subfieldList:[],
                }
        }
        componentWillMount () {
                this.getDataSource()
        }

        getDataSource=()=>{
                homeSource().then(res=>{
                        // console.log(res)
                        const {bannerList,needsList,providerList,subfieldList} = res
                        this.setState({bannerList,needsList,providerList,subfieldList})
                })
        }
        //sub按钮点击模拟
        handleOnSubIconClick=item=>{
                const {jumpUrl,msg,status} = item
                //可点击跳转
                const clickedAble = ()=>{
                        window.location.href = jumpUrl
                }
                //不可点击弹出消息
                const clickedDisabled =()=>{
                        Toast.info(msg)
                }
                const handle = [
                        clickedAble,
                        clickedDisabled
                ]
                handle[status]();

        }
        render () {
                const {defaultBtnValue,bannerList,subfieldList,providerList,needsList} = this.state
                const listRender = [
                        providerList.map((item,key)=><SupplyItem dataSource={item} key={key} onClick={()=>{
                                this.props.history.push(`/home/supplyDetail/${item.id}`)
                        }}/>),
                        needsList.map((item,key)=><BuyItem dataSource={item} key={key}/>)
                ][defaultBtnValue]
                return <ContentView className='home' >
                        <div slot='header' className='header'>
                                <div className="header-container">
                                        <div className="map-slider">杭州</div>
                                        <div className="input-wrapper">
                                                <input type="text" placeholder='请输入商品名称'/>
                                        </div>
                                </div>
                                <div className="rating-btn"/>
                        </div>
                        <ScrollContent slot='content'>
                                <div className="banner">
                                        <Carousel>
                                                {
                                                        bannerList.map((item,index)=> <a href={item.contentUrl} key={index} className='path-redirect-wrapper'>
                                                                <img src={item.imagesUrl} alt=""/>
                                                        </a>)
                                                }
                                        </Carousel>
                                </div>
                                <Block>
                                        <div className="redirect-btn-group">
                                                {
                                                        subfieldList.map((item,index)=><div key={index} className="redirect-btn-item">
                                                                <div className="icon-wrapper" onClick={this.handleOnSubIconClick.bind(this,item)}>
                                                                        <img src={item.iconUrl} alt=""/>
                                                                </div>
                                                                <p className="label">{item.iconTitle}</p>
                                                        </div>)
                                                }
                                        </div>
                                </Block>
                                {/*<BuyRatingItem/>*/}
                                <Block>
                                        <ToggleBtnGroup defaultBtnValue={defaultBtnValue} onClick={defaultBtnValue=>{this.setState({defaultBtnValue})}}/>
                                        {listRender}
                                </Block>
                        </ScrollContent>
                </ContentView>
        }
}
